import React, { useEffect, useRef, useState } from 'react';

import { request, useModel } from 'umi';
import { Avatar, message, Spin, Button, Modal } from 'antd';
import ProCard from '@ant-design/pro-card';
import ProDescriptions from '@ant-design/pro-descriptions';

import moment from 'moment';
import { api } from '@/global';
import ModifyPassword from './components/ModifyPassword';
type CurrentUser = {
  name?: string;
  avatar?: string;
  id?: string;
  email?: string;
  signature?: string;
  title?: string;
  group?: string;
  tags?: { key?: string; label?: string }[];
  notifyCount?: number;
  unreadCount?: number;
  country?: string;
  access?: string;
  geographic?: {
    province?: { label?: string; key?: string };
    city?: { label?: string; key?: string };
  };
  address?: string;
  phone?: string;

  sex?: string;
  statu?: number;
  root?: boolean;
  dept?: string;
  role?: number;
  professional?: string;
  num?: number;
  permissions: String[];
};

export default () => {
  const { initialState } = useModel('@@initialState');
  const actionRef = useRef();
  const { currentUser } = initialState;

  return (
    <ProCard>
      <ProDescriptions<CurrentUser>
        actionRef={actionRef}
        column={2}
        title="用户信息"
        bordered
        dataSource={currentUser}
        editable={{
          onSave: async (e, f) => {
            console.log(e);
            console.log(f);

            const data = await request(api.updatePrivateUserInfo, {
              method: 'POST',
              data: {
                [e]: f[e],
                id: currentUser.id,
              },
            });

            if (data.success) {
              message.success('修改成果，请刷新页面');
            } else {
              message.error('修改失败');
            }
          },
        }}
        columns={[
          {
            title: '姓名',
            key: 'name',
            dataIndex: 'name',

            ellipsis: true,
            editable: false,
          },
          {
            title: '性别',
            key: 'sex',
            dataIndex: 'sex',

            ellipsis: true,
            editable: false,
          },
          {
            title: '学号',
            key: 'num',
            dataIndex: 'num',

            ellipsis: true,
            editable: false,
          },
          {
            title: '专业',
            key: 'professional',
            dataIndex: 'professional',

            ellipsis: true,
            editable: false,
          },
          {
            title: '系部',
            key: 'dept',
            dataIndex: 'dept',
            ellipsis: true,
            editable: false,
          },
          {
            title: '邮箱',
            key: 'email',
            dataIndex: 'email',
            ellipsis: true,
          },
          {
            title: '手机号',
            key: 'phone',
            dataIndex: 'phone',
            ellipsis: true,
          },
          {
            title: '所属角色',
            key: 'role',
            dataIndex: 'role',
            ellipsis: true,
            editable: false,
          },
          {
            title: '头像',
            key: 'avatar',
            dataIndex: 'avatar',
            ellipsis: true,
            editable: false,
            valueType: 'image',
          },
          {
            title: '修改密码',
            editable: false,
            render: () => {
              return <ModifyPassword />;
            },
          },
        ]}
      />
    </ProCard>
  );
};
